<template>
  <div id="app">
    <el-container>
      <el-header class="top">
        <el-row>
          <el-col :span="20">
            <span>23物联网工程网站管理系统</span>
          </el-col>
          <el-col :span="4">
            <span>
            登录信息:{{ loginUser }}
            </span>
          </el-col>
        </el-row>
      </el-header>
      <el-container style="height: 700px;">
        <left-nav></left-nav>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <el-footer>
        <p>copyright</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import LeftNav from './components/Nav.vue'
export default {
  components: {
    LeftNav
  },
  computed: {
    ...mapState(['loginUser'])
  }
}
</script>

<style lang="less">
  *{
    padding:0px;
    margin:0px;
  }
  header.top {
    background: #eee;
    border-bottom:1px solid #999;
  }
  header.top span {
    font-size:18px;
    color:#333;
    position: relative;
    left:30px;
    top:12px;
  }
  aside {
    border-right:1px solid #aaa;
  }
  footer {
    background: #333;
  }
  footer p {
    color:#fff;
    text-align: center;
  }
</style>
